<template>
  <!-- 弹窗索引组件 -->
  <view class="pop-index">
    <template>
      <template v-for="type in visiblePops">
        <rule v-if="type === 'rule'" :key="type"></rule>
        <msg v-if="type === 'msg'" :key="type"></msg>
      </template>
    </template>
  </view>
</template>

<script>
import msg from './msg/msg.vue'
import rule from './rule/rule.vue'

export default {
  components: {
    rule,
    msg
  },

  computed: {
    // 计算可见的弹窗类型
    visiblePops () {
      const state = this.$store.state.pops
      return [...new Set(state.popShow.filter((item) => item.type).map((item) => item.type))]
    }
  }
}
</script>
